<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>

    <table border="1" align="center">
        <tr>
            <td>账户:</td>
            <td>
                <input type="text" id="username" />
            </td>
            <td id="td_1" style="width: 200px;"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="text" id="password_1" />
            </td>
            <td id="td_2" style="width: 200px;"></td>
            </td>
        </tr>

        <tr>
            <td colspan="3" align="center">
                <input type="button" id="submit" value="提交" />
            </td>
        </tr>
    </table>
    <script>
        let userInput = document.querySelector("#username")
        let pwdInput = document.querySelector("#password_1")
        let ss = document.querySelector("#submit")
        let td_1 = document.querySelector("#td_1")
        let td_2 = document.querySelector("#td_2")
        // 失去焦点的时候出发
        let checkUser = function () {
            let val = userInput.value
            let reg = /^[a-zA-z]{6,}$/
            if (reg.test(val)) {
                td_1.innerHTML = ""
                return true;
            } else {
                td_1.innerHTML = "错误,长度最少6位,字母组成"
                return false
            }
        }
        userInput.onblur = checkUser


        let checkpwd = function () {
            // 获取输入的值
            let val = pwdInput.value
            let reg = /^\d{5,7}$/
            if (reg.test(val)) {
                td_2.innerHTML = ""
                return true;
            } else {
                td_2.innerHTML = "错误,长度5-7位,数字组成"
                return false
            }
        }
        pwdInput.onblur = checkpwd
        ss.onclick = function () {
            console.log(1111);
            let isu = checkUser()
            let isp = checkpwd()
            if (isu && isp) {
                alert("可以登录")
            } else {
                alert('失败')
            }
        }

    </script>

</body>

</html>